<template>
  <div class="body">
    <!-- News -->
    <div class="News">
      <!-- 左 -->
      <div class="NewsL">
        <img src="/img/n1.jpg">
        <p>
          <span>免费咨询：333-4444-333<br>咨询热线：4444-88888888</span>
        </p>
      </div>
      <!-- 中 -->
      <div class="NewsM">
        <p class="NewsM-Top">
          <span>医院动态</span>
          <span>更多</span>
        </p>
        <div class="NewsM-M">
          <div class="newBtn">
            <span @click="newsChange" :class="{btnStyle:flagNews}">公司动态</span>
            <span @click="newsChange" :class="{btnStyleTwo:flagNewsTwo}">典型案例</span>
          </div>
        </div>
        <div class="NewsM-Btm">
          <h3 v-text="news.title"></h3>
          <p v-text="news.content"></p>
          <div>
            <li v-for="item in news.newsList" :key="item">{{item}}</li>
          </div>
        </div>
      </div>
      <!-- 右 -->
      <div class="NewsR">
        <div class="NewsR-T">
          <span>医院介绍</span>
          <span>更多</span>
        </div>
        <img src="/img/n3.jpg" class="NewsR-M">
        <p class="NewsR-B" v-text="news.contentRt"></p>
      </div>
    </div>
    <!-- 专家模块 -->
    <div class="export">
      <div class="export-T">
        <span>专家介绍</span>
        <span>更多</span>
      </div>
      <div class="export-M">
        <li v-for="(item,index) in Export.name" :key="index" :class="{nameStyle:flagName == index}" @mouseenter="nameChange(index)">{{item}}</li>
      </div>
      <div class="export-B">
        <div class="photo"><img :src="Export.photo"></div>
        <div class="information">
          <p v-text="Export.information.in1"></p>
          <p v-text="Export.information.in2"></p>
          <p v-text="Export.information.in3"></p>
          <p v-text="Export.information.in4"></p>
        </div>
        <div class="introduce"></div>
        <div class="salary"><img :src="Export.salary"></div>
      </div>
    </div>
    <!-- 特色疗法 -->
    <div class="method">
      <div class="method-T">
        <span>特色疗法</span>
        <span>更多</span>
      </div>
      <div class="method-B">
        <div class="method-BLt">
          <p v-for="(item,index) in Method.cure" :key="index" @mouseenter="showChange(index)">{{item}}</p>
        </div>
        <div class="method-BRt">
          <p>特色疗法1</p>
          <p>特色疗法2</p>
          <p>特色疗法3</p>
          <p>特色疗法4</p>
          <span></span>
          <i>四大疗法</i>
        </div>
      </div>
    </div>
    <!-- 案例展示 -->
    <div class="show">
      <div class="show-T">
        <span>案例展示</span>
        <span>更多</span>
      </div>
      <div class="show-B">
        <div class="show-BL">
          <img :src="Export.photo">
        </div>
        <div class="show-BM">
          <h3 v-text="news.title"></h3>
          <p v-text="news.content"></p>
          <div>
            <li v-for="item in news.newsList" :key="item">{{item}}</li>
          </div>
        </div>
        <div class="show-BR">
          <h2>最新推荐文章</h2>
          <p>成功案例1</p>
        </div>
      </div>
    </div>
    <!-- 健康护理 -->
    <div class="heathy">
      <div class="heathy-T">
        <span>健康护理</span>
        <span>更多</span>
      </div>
      <div class="heathy-B">
        <div class="heathy-BL">
          <img :src="Export.photo">
        </div>
        <div class="heathy-BM">
          <h3 v-text="news.title"></h3>
          <p v-text="news.content"></p>
          <div>
            <li v-for="item in news.newsList" :key="item">{{item}}</li>
          </div>
        </div>
        <div class="heathy-BR">
          <h2>最新推荐文章</h2>
          <p>成功案例1</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      //新闻切换
      flagNews:true,
      flagNewsTwo:false,
      option1:2,//按钮1
      option2:1,//按钮2
      news:{
        title:'标题',
        content:'内容',
        newsList:[1,2,3],
        contentRt:'内容'
      },
      //专家版块
      flagName:0,
      Export:{
        name:['廊桥张','廊桥张','廊桥张','廊桥张','廊桥张','廊桥张','廊桥张','廊桥张','廊桥张','廊桥张'],
        photo:'/img/e1.jpg',
        information:{
          in1:'示例',
          in2:'示例',
          in3:'示例',
          in4:'预约挂号',
        },
        introduce:'',
        salary:'/img/e2.jpg'
      },
      //特色疗法版块
      flagMethod:0,//标志位
      Flag:[0,1,2,3],
      i:0,
      Method:{
        cure:['特色疗法1','特色疗法2','特色疗法3','特色疗法4']
      }

    }
  },
  methods:{
    newsChange(){
      if(this.option1 == 1){
        //第一个按钮
        this.flagNews = true
        this.flagNewsTwo = false
        this.option1 = 2//关闭btn1标志位
        this.option2 = 1//开启btn2标志位
        return
      }
      if(this.option2 == 1){
        //第二个按钮
        this.flagNews = false
        this.flagNewsTwo = true
        this.option2 = 2
        this.option1 = 1
      }
    },
    nameChange(index){
      //专家介绍切换
      this.flagName = index
    },
    showChange(index){
      //特色疗法切换
      this.flagMethod = index
    }
  }
}
</script>

<style scoped>
*{
  margin: 0;
  padding: 0;
}
.body{
  padding: 20px 0;
}
.News{
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  background-color: whitesmoke;
  padding: 2px 0;
}
.NewsL{
  border: 1px solid red;
  height: 400px;
  width: 250px;
  display: flex;
  flex-direction: column;
}
.NewsL img{
  width: 250px;
  height: 300px;
}
.NewsL p{
  margin: 0;
  text-align: center;
  line-height: 25px;
  background-color: orange;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: aliceblue;
}
.NewsM{
  border: 1px solid red;
  height: 400px;
  width: 600px;
  display: flex;
  flex-direction: column;
}
.NewsM-Top{
  display: flex;
  justify-content: space-between;
  height: 30px;
  line-height: 30px;
  background-color: cadetblue;
  color: white;
}
.NewsM-Top span{
  margin: 0 10px;
}
.NewsM-Top :last-child{
  cursor: pointer;
}
.NewsM-Top :last-child:hover{
  color: red;
}
.NewsM-M{
  height: 270px;
  background: url('/img/n2.jpg') no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.newBtn{
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: grey;
}
.newBtn span{
  text-align: center;
  display: inline-block;
  width: 80px;
  height: 30px;
  color: white;
  font-size: 14px;
  line-height: 30px;
  border: 1px solid black;
  cursor: pointer;
}
.btnStyle{
  Color:white;
  background-color:cadetblue;
}
.btnStyleTwo{
  Color:white;
  background-color:cadetblue;
}
.NewsM-Btm{
  height: 300px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding:20px 10px;
}
.NewsM-Btm h3{
  width: 100%;
  text-align: center;
  color: cadetblue;
}
.NewsM-Btm p{
  line-height: 25px;
  height: 60px;
  overflow: hidden;
}
.NewsM-Btm div li{
  line-height: 30px;
}
.NewsR{
  border: 1px solid red;
  height: 400px;
  width: 250px;
  display: flex;
  flex-direction: column;
}
.NewsR-T{
  display: flex;
  justify-content: space-between;
  height: 30px;
  line-height: 30px;
  background-color: cadetblue;
  color: white;
}
.NewsR-T span{
  margin: 0 10px;
}
.NewsR-T :last-child{
  cursor: pointer;
}
.NewsR-T :last-child:hover{
  color: red;
}
.NewsR-M{
 width: 250px;
 height: 170px;
}
.NewsR-B{
  box-sizing: border-box;
  padding: 10px;
  overflow: hidden;
}
/* 专家模块 */
.export{
  border: 1px solid red;
  height: 400px;
  width: 1200px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}
.export-T{
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  background-color: cadetblue;
  color: white;
}
.export-T span{
  margin: 0 10px;
}
.export-T :last-child{
  cursor: pointer;
}
.export-T :last-child:hover{
  color: red;
}
.export-M{
  display: flex;
  justify-content: space-around;
  height: 50px;
  background-color: gainsboro;
}
.export-M li{
  background-color: gainsboro;
  color: black;
  line-height: 50px;
  list-style: none;
  padding: 0 25px;
  cursor: pointer;
}
.export-M .nameStyle{
  background-color: cadetblue;
  color: white;
}
.export-B{
  display: flex;
  align-items: center;
  height: 300px;
}
.photo{
  margin: 0 20px;
}
.photo img{
  width: 150px;
  height: 200px;
}
.information{
  width: 200px;
  height: 200px;
  margin-right: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.information :nth-child(n){
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
}
.information :nth-child(2n){
  background-color: yellowgreen;
}
.information :nth-child(2n+1){
  background-color: orange;
}
.introduce{
  width: 400px;
  height: 250px;
  border: 1px solid yellowgreen;
  margin-right: 20px;
}
.salary{
  width: 300px;
  height: 200px;
}
.salary img{
  width: 300px;
  height: 200px;
}
/* 特色疗法 */
.method{
  width: 1200px;
  height: 400px;
  border: 1px solid red;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
.method-T{
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  background-color: cadetblue;
  color: white;
}
.method-T span{
  margin: 0 10px;
}
.method-T :last-child{
  cursor: pointer;
}
.method-T :last-child:hover{
  color: red;
}
.method-B{
  padding: 10px 20px;
  display: flex;
}
.method-BLt{
  width: 150px;
  height: 200px;
  border: 1px solid blue;
  background-color: cadetblue;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.method-BLt p{
  width: 150px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: cadetblue;
  border-bottom: 1px solid white;
  cursor: pointer;
  color: aliceblue;
}
.method-BLt :last-child{
  border-bottom: none;
}
.method-BLt p:hover{
  color: orange;
}
.method-BRt{
  margin-left: 40px;
  width: 800px;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.method-BRt p{
 background-color: aqua;
 display: inline-block;
 width: 380px;
 height: 150px;
 margin-right: 10px;
 margin-bottom: 10px;
 text-align: center;
 line-height: 150px;
}
.method-BRt span{
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  border: 1px solid black;
  background-color: cadetblue;
  top: 51px;
  left: 285px;
}
.method-BRt i{
  position: absolute;
  width: 229px;
  height: 86px;
  border: 1px solid black;
  background-color: cadetblue;
  top: 110px;
  left: 270px;
  font-size: 30px;
  font-style: inherit;
  color: yellowgreen;
  line-height: 86px;
  text-align: center;
}
/* 案例展示 */
.show{
  width: 1200px;
  height: 300px;
  border: 1px solid red;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
.show-T{
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  background-color: cadetblue;
  color: white;
}
.show-T span{
  margin: 0 10px;
}
.show-T :last-child{
  cursor: pointer;
}
.show-T :last-child:hover{
  color: red;
}
.show-B{
  display: flex;
  align-items: center;
  height: 300px;
}
.show-BL{
  margin: 0 40px;
}
.show-BL img{
  width: 150px;
  height: 200px;
}
.show-BM{
  width: 600px;
  height: 200px;
  border: 1px solid black;
  box-sizing: border-box;
  padding: 0 10px;
}
.show-BM h3{
  text-align: center;
}
.show-BM p{
  line-height: 25px;
}
.show-BM div li{
  margin: 10px 0;
  line-height: 25px;
}
.show-BR{
  margin-left: 20px;
  width: 250px;
  height: 200px;
  border: 1px solid black;
}
/* 健康护理 */
.heathy{
  width: 1200px;
  height: 300px;
  border: 1px solid red;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
.heathy-T{
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  background-color: cadetblue;
  color: white;
}
.heathy-T span{
  margin: 0 10px;
}
.heathy-T :last-child{
  cursor: pointer;
}
.heathy-T :last-child:hover{
  color: red;
}
.heathy-B{
  display: flex;
  align-items: center;
  height: 300px;
}
.heathy-BL{
  margin: 0 40px;
}
.heathy-BL img{
  width: 150px;
  height: 200px;
}
.heathy-BM{
  width: 600px;
  height: 200px;
  border: 1px solid black;
  box-sizing: border-box;
  padding: 0 10px;
}
.heathy-BM h3{
  text-align: center;
}
.heathy-BM p{
  line-height: 25px;
}
.heathy-BM div li{
  margin: 10px 0;
  line-height: 25px;
}
.heathy-BR{
  margin-left: 20px;
  width: 250px;
  height: 200px;
  border: 1px solid black;
}
</style>